<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The City List Page</h1>
    <table id="city-table" border="1px"></table>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/table.js"></script>
<script>
    var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
    $(function(){ //页面加载完成以后执行
        doInit("city-table",cityColumns);//创建thead,tbody
        doLoadCitys();
    })

    //异步加载服务端citys信息
    function doLoadCitys(){
        $.ajax({
            url:"doAjaxGet",
            success:function (result){
                //console.log(result);
                doSetTableBodtRows($("#city-table>tbody"),result);
            }
        });
    }
    function doSetTableBodtRows(tBody,result){
        //let tBody=$("#city-table").find("tbody");
        //let tBody=$("#city-table>tbody");
        tBody.empty();
        /*方法一*/
       /* for(let i=0;i<result.length;i++){
            tBody.append(doCreatRow(result[i]));
        }*/

        /*方法二*/
       /* result.forEach(function (row){
            tBody.append(doCreatRow(row));
        })*/

        /*方法三*/
        result.forEach(row=>tBody.append(doCreatRow(row)));


    }
    function doCreatRow(row){
        return `<tr>
                     <td>${row.id}</td>
                     <td>${row.city}</td>
                     <td><a href='javascript:doDeleteById(${row.id})'>delete</a></td>
                </tr>`
    }
    function doDeleteById(id) {
       // debugger
        $.ajax({

            url: `doAjaxDelete/${id}`,
            method: "delete",
            success: function (result) {
                alert(result);
                doLoadCitys();
            }
        });
    }
</script>

</body>
</html>